<template>
    <el-dialog :visible.sync="visible" :title="dataForm.details ? '详情' : (!dataForm.id ? $t('add') : $t('update'))"
        :close-on-click-modal="false" :close-on-press-escape="false" @close="close()" @open="open()"
        :destroy-on-close="true">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
            :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'" label-position="right" :disabled="disabled">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="车辆图片" prop="photo">
                        <el-upload :limit="1" class="avatar-uploader" :action="url"
                            :on-remove="(file, fileList) => handleRemove(file, fileList)"
                            :on-success="(res, file) => handleAvatarSuccess(res, file)" :before-upload="beforeAvatarUpload"
                            :show-file-list="false">
                            <img v-if="dataForm.photo" :src="dataForm.photo" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="司机姓名" prop="name">
                        <el-input type="text" v-model="dataForm.name" :placeholder="disabled ? '' : '司机姓名'"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车牌号" prop="numberplate">
                        <el-input type="text" v-model="dataForm.numberplate"
                            :placeholder="disabled ? '' : '车牌号'"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="手机号" prop="phone">
                        <el-input type="text" v-model="dataForm.phone" :placeholder="disabled ? '' : '手机号'"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="驾龄" prop="driveAge">
                        <el-input type="text" v-model="dataForm.driveAge" :placeholder="disabled ? '' : '驾龄'"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="车辆状态" prop="type">
                        <SelectComponent dictType="" v-model="dataForm.type" :options="statusOptions" ref="type"
                            placeholder="车辆状态">
                        </SelectComponent>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="起步价格" prop="startingPrice">
                        <el-input type="number" v-model="dataForm.startingPrice"
                            :placeholder="disabled ? '' : '起步价格'"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="备注" prop="remark">
                        <el-input type="text" v-model="dataForm.remark" :placeholder="disabled ? '' : '备注'"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <SelectComponent dictType="" v-model="dataForm.status" :options="status1Options" ref="status"
                            placeholder="状态">
                        </SelectComponent>
                    </el-form-item>
                </el-col>

            </el-row>

        </el-form>
        <template slot="footer" v-if="!disabled">
            <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle()">{{
                $t("confirm")
            }}</el-button>
        </template>
    </el-dialog>
</template>

<script>
import Cookies from "js-cookie";
import debounce from "lodash/debounce";
import mixinRegionModule from "@/mixins/region-module";

export default {
    mixins: [mixinRegionModule],

    data() {
        return {
            visible: false,
            url: `${window.SITE_CONFIG["apiURL"]
                }/oss/file/aliyunUpload?access_token=${Cookies.get("access_token")}`,
            fileList: [],
            companyOptions: [],
            typeOptions: [],
            statusOptions: [{
                dictValue: 0,
                dictLabel: "空闲"
            },
            {
                dictValue: 1,
                dictLabel: "接单"
            },
            ],
            status1Options: [{
                dictValue: 0,
                dictLabel: "停用"
            },
            {
                dictValue: 1,
                dictLabel: "正常"
            },
            ],

            isInsureType: true,
            isTakeDeliverType: true,
            isReverseImageType: true,
            dataForm: {
                id: "",
                photo: "",
                name: "",
                rentalcarCompanyId: "",
                carPower: "",
                driveAge: "",
                remark: "",
                startingPrice: "",
                driversType: '',
                type: '',
                numberplate: '',
                phone: ''
            },
        };
    },
    props: {
        disabled: Boolean
    },
    computed: {
        dataRule() {
            return {
                photo: [
                    { required: true, message: "请输入车辆图片", trigger: "blur" },
                ],
                name: [
                    { required: true, message: "请输入司机姓名", trigger: "blur" },
                ],
                numberplate: [
                    { required: true, message: "请选择车牌号", trigger: "change" },
                ],
                phone: [
                    { required: true, message: "请选择手机号", trigger: "change" },
                ],
                driveAge: [
                    { required: true, message: "请选择驾龄", trigger: "change" },
                ],
                type: [
                    { required: true, message: "请输入出租车类型", trigger: "blur" },
                ],
                startingPrice: [
                    { required: true, message: "请选择起步价格", trigger: "change" },
                ],
                remark: [
                    { required: true, message: "请输入备注", trigger: "blur" },
                ],

            };
        },
    },
    methods: {
        open() {
            //获取公司
            this.$http.get("/travel/travel/rentalcarcompany/page", {
                params: {
                    page: 1,
                    limit: 99999,
                }
            }).then(({
                data: res
            }) => {
                res.data.list.forEach(l => {
                    this.companyOptions.push({
                        dictValue: l.id,
                        dictLabel: l.corporateName
                    })
                })
            }).catch(() => { });
            //获取车辆类型
            // this.$http.get("/travel/travel/rentalcartype/page", {
            //     params: {
            //         page: 1,
            //         limit: 99999,
            //     }
            // }).then(({
            //     data: res
            // }) => {
            //     res.data.list.forEach(l => {
            //         let t = this.jzOptions.find(j => j.dictValue == l.driversType);
            //         this.typeOptions.push({
            //             dictValue: l.id,
            //             dictLabel: l.carName + (t ? ('(' + t.dictLabel + ')') : '')
            //         })
            //     })
            // }).catch(() => {});

        },
        handleRemove(file) {
            this.dataForm.photo = '';
        },
        handleAvatarSuccess(res, file) {
            if (res.code === 0) {
                this.dataForm.photo = res.data.url;
            }
        },
        beforeAvatarUpload(file) {
            if (
                file.type !== "image/jpg" &&
                file.type !== "image/jpeg" &&
                file.type !== "image/png" &&
                file.type !== "image/gif"
            ) {
                this.$message.error(this.$t("upload.tip", {
                    format: "jpg、png、gif"
                }));
                return false;
            }
        },
        close() {
            this.fileList = [];
            this.companyOptions = [];
            this.typeOptions = [];
            this.isInsureType = true;
            this.isTakeDeliverType = true;
            this.isReverseImageType = true;
            this.dataForm = {
                id: "",
                photo: "",
                name: "",
                rentalcarCompanyId: "",
                carPower: "",
                driveAge: "",
                remark: "",
                startingPrice: "",
                driversType: '',
                type: '',
                numberplate: ''
            };
            this.$emit("changeDisabled");
        },

        init() {
            this.visible = true;
            this.$nextTick(() => {
                this.$refs["dataForm"].resetFields();
                if (this.dataForm.id) {
                    this.getInfo();
                }
            });
        },
        // 获取信息
        getInfo() {
            this.$http
                .get("/travel/travel/rentalcarylbmcar/" + this.dataForm.id)
                .then(({
                    data: res
                }) => {
                    console.log(res, '1111111q');
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    this.dataForm = {
                        ...this.dataForm,
                        ...res.data,
                    };

                    this.$refs.type.selectValue = this.dataForm.type;
                    this.$refs.status.selectValue = this.dataForm.status;
                    // this.$refs.shopVehicles_sc.selectValue = this.dataForm.shopVehicles;
                    this.isInsureType = this.dataForm.insureType == 0 ? true : false;
                    this.isTakeDeliverType = this.dataForm.takeDeliverType == 0 ? true : false;
                    this.isReverseImageType = this.dataForm.reverseImageType == 0 ? true : false;
                })
                .catch(() => { });
        },
        // 表单提交
        dataFormSubmitHandle: debounce(
            function () {
                this.$refs["dataForm"].validate((valid) => {
                    if (!valid) {
                        return false;
                    }


                    this.$http[!this.dataForm.id ? "post" : "put"](
                        !this.dataForm.id ? "/travel/travel/rentalcarylbmcar" : "/travel/travel/rentalcarylbmcar",
                        this.dataForm
                    )
                        .then(({
                            data: res
                        }) => {
                            if (res.code !== 0) {
                                return this.$message.error(res.msg);
                            }
                            this.$message({
                                message: this.$t("prompt.success"),
                                type: "success",
                                duration: 500,
                                onClose: () => {
                                    this.visible = false;
                                    this.$emit("refreshDataList");
                                },
                            });
                        })
                        .catch(() => { });
                });
            },
            1000, {
            leading: true,
            trailing: false
        }
        ),
    }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
